<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息管理</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 优化后的CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
        }

        .profile-container {
            min-height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        /* 其他样式保持与Vue版本完全一致... */
        /* 完整样式请保留原<style>标签内的所有内容 */
        .profile-container::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            background-image: linear-gradient(
                    45deg,
                    rgba(255, 255, 255, 0.1) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.1) 50%,
                    rgba(255, 255, 255, 0.1) 75%,
                    transparent 75%,
                    transparent
            );
            background-size: 40px 40px;
            animation: animateBg 20s linear infinite;
            opacity: 0.1;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 24px;
            padding: 2.5rem;
            width: 100%;
            max-width: 680px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.4);
            position: relative;
            z-index: 1;
        }

        .glass-input {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.08);
            padding: 0.85rem 1.3rem;
            border-radius: 14px;
            width: 100%;
            font-size: 1rem;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-scale {
            transition: transform 0.2s ease;
        }
        .hover-scale:hover {
            transform: scale(1.05);
        }

        .focus-effect:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
            border-color: #007aff;
        }

        .slide-fade-enter-active {
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .slide-fade-leave-active {
            transition: opacity 0.2s ease, transform 0.2s cubic-bezier(1, 0.5, 0.8, 1);
        }
        .slide-fade-enter-from,
        .slide-fade-leave-to {
            opacity: 0;
            transform: translateY(-8px);
        }

        .edit-btn {
            background: rgba(0, 122, 255, 0.08);
            color: #007aff;
            border: 1px solid rgba(0, 122, 255, 0.2);
            padding: 0.5rem 1.1rem;
            border-radius: 10px;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .save-btn {
            background: #007aff;
            color: white;
            border: none;
            padding: 0.7rem 1.4rem;
            border-radius: 10px;
            margin-top: 1rem;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .form-group {
            margin-bottom: 2rem;
            position: relative;
        }
        .form-label {
            display: block;
            color: #666;
            margin-bottom: 0.6rem;
            font-size: 0.92rem;
            font-weight: 500;
        }
        .current-value {
            font-weight: 500;
            color: #1a1a1a;
            font-size: 1.05rem;
        }

        .input-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .edit-panel {
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .profile-title {
            text-align: center;
            margin-bottom: 2.5rem;
            color: #1a1a1a;
            font-weight: 650;
            font-size: 2.1rem;
            letter-spacing: -0.5px;
        }

        @keyframes animateBg {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 640px) {
            .profile-container {
                padding: 1.5rem;
            }
            .glass-card {
                padding: 1.8rem;
                border-radius: 20px;
            }
            .profile-title {
                font-size: 1.8rem;
            }
        }

    </style>
</head>
<body>
<div class="profile-container">
    <div class="glass-card">
        <h1 class="profile-title">个人信息</h1>

        <!-- 用户名 -->
        <div class="form-group">
            <label class="form-label">用户名</label>
            <div class="input-group">
                <span class="current-value" id="currentUsername">John Doe</span>
                <button onclick="toggleEdit('username')"
                        class="edit-btn hover-scale">
                    <span id="usernameBtnText">编辑</span>
                </button>
            </div>
            <div id="usernamePanel" class="edit-panel" style="display: none;">
                <input type="text"
                       id="editedUsername"
                       class="glass-input focus-effect"
                       placeholder="输入新用户名"
                       oninput="handleUsernameInput(event)">
                <button onclick="saveUsername()"
                        class="save-btn hover-scale">
                    保存
                </button>
            </div>
        </div>

        <!-- 邮箱 -->
        <div class="form-group">
            <label class="form-label">邮箱</label>
            <div class="input-group">
                <span class="current-value" id="currentEmail">user@example.com</span>
                <button onclick="toggleEdit('email')"
                        class="edit-btn hover-scale">
                    <span id="emailBtnText">编辑</span>
                </button>
            </div>
            <div id="emailPanel" class="edit-panel" style="display: none;">
                <input type="email"
                       id="editedEmail"
                       class="glass-input focus-effect"
                       placeholder="输入新邮箱"
                       oninput="handleEmailInput(event)">
                <button onclick="saveEmail()"
                        class="save-btn hover-scale">
                    保存
                </button>
            </div>
        </div>

        <!-- 密码 -->
        <div class="form-group">
            <label class="form-label">密码</label>
            <div class="input-group">
                <span class="current-value">••••••••</span>
                <button onclick="toggleEdit('password')"
                        class="edit-btn hover-scale">
                    <span id="passwordBtnText">修改</span>
                </button>
            </div>
            <div id="passwordPanel" class="edit-panel" style="display: none;">
                <input type="password"
                       id="editedPassword"
                       class="glass-input focus-effect"
                       placeholder="输入新密码">
                <button onclick="savePassword()"
                        class="save-btn hover-scale">
                    保存
                </button>
            </div>
        </div>

        <!-- 家庭住址 -->
        <div class="form-group">
            <label class="form-label">家庭住址</label>
            <div class="input-group">
                <span class="current-value" id="currentAddress">未设置</span>
                <button onclick="toggleEdit('address')"
                        class="edit-btn hover-scale">
                    <span id="addressBtnText">编辑</span>
                </button>
            </div>
            <div id="addressPanel" class="edit-panel" style="display: none;">
                    <textarea id="editedAddress"
                              class="glass-input focus-effect"
                              rows="3"
                              placeholder="输入详细地址"
                              oninput="handleAddressInput(event)"></textarea>
                <button onclick="saveAddress()"
                        class="save-btn hover-scale">
                    保存
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // 状态管理
    let state = {
        username: 'John Doe',
        email: 'user@example.com',
        address: '',
        password: '',
        editing: {
            username: false,
            email: false,
            password: false,
            address: false
        }
    };

    // 从 cookie 中获取指定名称的值
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        console.log(parts);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }

    function InitInfoOfPersonal(){
        const token = getCookie('token');
        $.ajax({
            url: 'http://localhost:8000/user/user/getUserInfo',
            method: 'GET',
            headers: {
                'Authorization': `${token}`
            },
            success: function (response) {
                console.log(response);
                state.username = response.data.username;
                state.email = response.data.email;
                state.address = response.data.position;
                document.getElementById('currentUsername').textContent = state.username;
                document.getElementById('currentEmail').textContent = state.email;
                document.getElementById('currentAddress').textContent = state.address;
            }
        })
    }

    InitInfoOfPersonal();



    // 通用切换函数
    function toggleEdit(field) {
        state.editing[field] = !state.editing[field];
        const panel = document.getElementById(`${field}Panel`);
        const btnText = document.getElementById(`${field}BtnText`);

        if (state.editing[field]) {
            panel.style.display = 'flex';
            btnText.textContent = '取消';
            // 初始化编辑值
            if (field !== 'password') {
                document.getElementById(`edited${field.charAt(0).toUpperCase() + field.slice(1)}`).value = state[field];
            }
        } else {
            panel.style.display = 'none';
            btnText.textContent = field === 'password' ? '修改' : '编辑';
        }
    }

    // 保存函数
    function saveUsername() {
        state.username = document.getElementById('editedUsername').value;
        const token = getCookie('token');
        $.ajax({
            url: 'http://localhost:8000/user/user/update',
            method: 'PUT',
            headers: {
                'Authorization': `${token}`
            },
            data: {
                username: state.username
            },
            success: function (response) {
                if (response.code === 200){
                    alert("修改成功");
                }else{
                    alert("修改失败");
                }
            },
            error: function (error) {
                alert("修改失败");
            }
        });
        document.getElementById('currentUsername').textContent = state.username;
        toggleEdit('username');
    }

    function saveEmail() {
        state.email = document.getElementById('editedEmail').value;
        const token = getCookie('token');
        $.ajax({
            url: 'http://localhost:8000/user/user/update',
            method: 'PUT',
            headers: {
                'Authorization': `${token}`
            },
            data: {
                email: state.email
            },
            success: function (response) {
                if (response.code === 200){
                    alert("修改成功");
                }else{
                    alert("修改失败");
                }
            },
            error: function (error) {
                alert("修改失败");
            }
        });
        document.getElementById('currentEmail').textContent = state.email;
        toggleEdit('email');
    }

    function savePassword() {
        // 这里可以添加密码验证逻辑
        const password = document.getElementById('editedPassword').value;
        const token = getCookie('token');
        $.ajax({
            url: 'http://localhost:8000/user/user/update',
            method: 'PUT',
            headers: {
                'Authorization': `${token}`
            },
            data: {
                password: password
            },
            success: function (response) {
                if (response.code === 200) {
                    alert("密码修改成功");
                    document.getElementById('editedPassword').value = ''; // 清空密码输入框
                } else {
                    alert("密码修改失败");
                }
            },
            error: function (error) {
                alert("密码修改失败");
            }
        });
        toggleEdit('password');
    }


    function saveAddress() {
        state.address = document.getElementById('editedAddress').value;
        const token = getCookie('token');
        console.log(state.address);
        $.ajax({
            url: 'http://localhost:8000/user/user/update',
            method: 'PUT',
            headers: {
                'Authorization': `${token}`
            },
            data: {
                position: state.address
            },
            success: function (response) {
                if (response.code === 200){
                    alert("修改成功");
                }else{
                    alert("修改失败");
                }
            },
            error: function (error) {
                alert("修改失败");
            }
        });
        document.getElementById('currentAddress').textContent = state.address || '未设置';
        toggleEdit('address');
    }

    // 输入处理
    function handleUsernameInput(e) {
        state.editedUsername = e.target.value;
    }

    function handleEmailInput(e) {
        state.editedEmail = e.target.value;
    }

    function handleAddressInput(e) {
        state.editedAddress = e.target.value;
    }
</script>
</body>
</html>